<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>档案管理系统</title>	
		<link rel="stylesheet" href="skin/css/main.css">
		<script>	
		    (function () {
				var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';	
				var docEl = document.documentElement;
				function resizeFn() {	
					var docW = docEl.clientWidth;	
					if (docW > 750) {	
						docW = 750	
					}	
					docEl.style.fontSize = (docW * 100 / 750) + 'px';	
				}	
				resizeFn();	 	
				window.addEventListener(resizeEvt, resizeFn);	
			})();			
		</script>
	</head>
	<body>	
	<script src="skin/pdfjs/build/pdf.js"></script>
	<div class="totalPage"><font class="current">1</font>/<font class="total"></font></div>
	<div class="showdbox" >
		<div id="canvas_list"></div>
		<a href="" class="bt" style="color: #ddd;">我要做一个一样的...</a>
	</div>	
	<div class="show_bt">
		<a href="###" class="item-1">
			<i>&#xe620;</i>下载
		</a>
		<a href="###" class="item-1">
			<i>&#xe600;</i>收藏
		</a>
		<a href="javascript:;" class="item-1 fengxiangclick">
			<i style="font-size: 0.38rem;">&#xe631;</i>分享
		</a>
		<a href="###" class="item-2 daohangclick">
			&#xe601;
		</a>
	</div>	
	<!-- 分享弹框 -->
	<div class="fenxiang_box">
		<div class="item">
			请点击右上角「...」，进行分享
		</div>
	</div>
	<!-- 弹框结束 -->
	<!-- 更多弹框效果 -->
	<div class="dankuang_box">
		<a href="###" class="item">
			传至电脑打印
		</a>
	</div>
	<!-- 更多弹框效果结束 -->
	<!-- 文档加载中 -->
	<div class="loading">
		<div class="txt">文档打开中</div>
	</div>
	<!-- 加载核心库 -->
	<script>
		pdf = null,
		pageNum = 1,
		pageRendering = false,
		pageNumPending = null,
		scale = 1.5;
		_url = "skin/img/1.pdf";
		canvasList = document.getElementById('canvas_list');
		/**
		 * Get page info from document, resize canvas accordingly, and render page.
		 * @param num Page number.
		 */
		function renderPage(num) {
			pageRendering = true;
			// Using promise to fetch the page
			pdf.getPage(num).then(function(page) {				
				var canvas = document.createElement('canvas');				
				canvasList.appendChild(canvas);
				var context = canvas.getContext('2d');
				var viewport = page.getViewport({ scale: scale, });
				canvas.height = viewport.height;
				canvas.width = viewport.width;
				canvas.setAttribute("id",num);
				// Render PDF page into canvas context
				var renderContext = {
					canvasContext: context,
					viewport: viewport,
				};
				var renderTask = page.render(renderContext);
				// Wait for rendering to finish
				renderTask.promise.then(function() {
					pageRendering = false;
					if (pageNumPending !== null) {
						// New page rendering is pending
						renderPage(pageNumPending);
						pageNumPending = null;
					}
				});
			});
		}
		
		/**
		 * If another page rendering in progress, waits until the rendering is
		 * finised. Otherwise, executes rendering immediately.
		 */
		function queueRenderPage(num) {
			if (pageRendering) {
				pageNumPending = num;
			} else {
				renderPage(num);
			}
		}
		
		
		/**
		 * Asynchronously downloads PDF.
		 */		
		pdfjsLib.GlobalWorkerOptions.workerSrc ='skin/pdfjs/build/pdf.worker.js';
		var loadingTask = pdfjsLib.getDocument({ url: _url, });
		loadingTask.promise.then(function(pdfs) {
			numPages = pdfs.numPages;
			$(".total").html(numPages);
			pdf = pdfs; //对象赋值给全局变量
			for(var $i =1 ; $i <= numPages ; $i++) {
			   renderPage($i);
			}
		});
	</script>
	</body>
	<script src="skin/js/jquery-1.11.3.min.js"></script>
	<script>
	$(document).ready(function(){
		$('.fengxiangclick').click(function(){
		  $(".fenxiang_box").show();
		});
		$('.fenxiang_box').click(function(){
		  $(this).hide();
		});
		$(".dankuang_box").hide();
		$('.daohangclick').click(function(){
		  $(".dankuang_box").toggle(30);
		});
		$(window).scroll(function() {	
			var current = 1;
			var scrollHeigth = $(document).scrollTop();
			var unit = $("#1").height();
			var num = Math.ceil(scrollHeigth/unit);
			if(num<=1){
				$(".current").html(1);
			}else{
				$(".current").html(num);
			}			
		});
		document.onreadystatechange = function () {
			if (document.readyState == "complete") {
				$(".loading").hide();
			}
		};
	});	
	</script>
	
</html>
